<template>
  <div class="fireFightingBody">
    <div class="d-flex">
      <custom-radio-tag1 class="mb-1 w-100" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
    </div>
    <customSearch ref="customSearch" placeholder="请输入姓名" title="人员列表" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
    <div class="listInner">
      <div v-if="listData && listData.length>0" class="common_list">
        <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
          <div class="content_area">
            <div class="number_order">{{ 1 + index }}</div>
            <div class="right_content">
              <div class="content_title" style="max-width: 100%">
                {{ item.userName || item.managerName }}
                <span>
                  {{ active==='消防管理人员' ? item.jobTitle : item.professionTypeName }}
                </span>
              </div>
              <ul>
                <li>
                  <i class="iconfont c-text-color1">&#xe725;</i>
                  <div class="label">工作单位：</div>
                  <div class="value">{{ item.workUnit }}</div>
                </li>
                <template v-if="active === '专家库'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe634;</i>
                    <div class="label">属性类别：</div>
                    <div class="value">{{ item.expertAttributeList.map(val=>val.expertattributename).join(',') }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe664;</i>
                    <div class="label">专业类别：</div>
                    <div class="value">{{ item.professionTypeName }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe6a2;</i>
                    <div class="label">受聘状态：</div>
                    <div class="value">{{ item.employState }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe612;</i>
                    <div class="label">职务：</div>
                    <div class="value">{{ item.job }}</div>
                  </li>
                </template>
                <template v-else-if="active === '消防管理人员'">
                  <li>
                    <i class="iconfont c-text-color2">&#xe612;</i>
                    <div class="label">学历：</div>
                    <div class="value">{{ item.educationLevel }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe8d5;</i>
                    <div class="label">工作年限：</div>
                    <div class="value">{{ item.workLife }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe607;</i>
                    <div class="label">是否作为专家：</div>
                    <div class="value">{{ item.isExpert }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe664;</i>
                    <div class="label">专职/兼职：</div>
                    <div class="value">{{ item.partFull }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe664;</i>
                    <div class="label">专业：</div>
                    <div class="value">{{ item.specialityType }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color7">&#xe664;</i>
                    <div class="label">是否取得注册消防工程师证书：</div>
                    <div class="value">{{ item.isFireCertify }}{{ item.fireCertifyLevelName?`(${item.fireCertifyLevelName})`:'' }}</div>
                  </li>
                </template>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
    </div>
    <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll safe-area-inset-bottom close-on-popstate closeable class="custom-van-pop">
      <div class="pop-vertical-flex">
        <div class="pop-content">
          <!--          <div class="customPopCheckbox">-->
          <!--            <div class="checkbox-title">姓名</div>-->
          <!--            <el-input v-model="formInline.managerName" placeholder="请输入管理人员姓名" size="small" style="margin-bottom: 10px" />-->
          <!--          </div>-->
          <!--          <customPopCheckbox :list="selectOptionAll['文化程度']" :check-value.sync="formInline.educationLevel" title="学历" />-->
          <template v-if="active === '专家库'">
            <custom-timer type="year" title="年份" :is-interval="false" :picker-title="'请选择年份'" :date-value="formInline.years" @update:dateValue="getTime" />
            <customPopCheckbox :list="selectOptionAll['消防-属性类别']" :check-value.sync="formInline.expertAttribute" title="属性类别" />
            <customPopCheckbox :list="selectOptionAll['消防-专家类别']" :check-value.sync="formInline.professionType" title="专业类别" />
            <!--            <customPopCascade ref="customPopCascade" title="专家类别" cascader-title="行业类别" :list="selectOptionAll['消防-专家类别']" @change="cascadeChange" @clearData="formInline.professionType = ''" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="formInline.sex" title="性别" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['消防-职务']" :check-value.sync="formInline.job" title="职务" />-->
            <customPopCheckbox :list="selectOptionAll['专家聘任状态']" :check-value.sync="formInline.employState" title="受聘状态" />
          </template>
          <template v-if="active === '消防管理人员'">
            <!--            <customPopCheckbox :list="selectOptionAll['人员管理-专职/兼职']" :check-value.sync="formInline.partFull" title="专职/兼职" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['性别']" :check-value.sync="formInline.sex" title="性别" />-->
            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="formInline.isSafetyCertify" title="是否取得消防工程师证书" />
            <customPopCheckbox :list="selectOptionAll['是否专家']" :check-value.sync="formInline.isExpert" title="是否作为专家" />
            <!--            <customPopCheckbox :list="selectOptionAll['消防-职务']" :check-value.sync="formInline.job" title="职务" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="formInline.isSafetyCertify" title="是否取得注册消防工程师证" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['管理人员分类']" :check-value.sync="formInline.managerType" title="管理人员分类" />-->
            <!--            <customPopCheckbox :list="selectOptionAll['是否专家']" :check-value.sync="formInline.isExpert" title="是否作为专家" />-->
          </template>
        </div>
        <div class="pop-bottom">
          <van-button type="default" @click="resetSuperSearch">清空</van-button>
          <van-button type="info" @click="handleSuperSearch">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import { XfExpertList, XfManagerList } from '@/api/commonPage/personnel'
import { currentTime } from '@/utils/dayJs'

export default {
  mixins: [commonList],
  data() {
    return {
      formInline: {
        years: currentTime('年'),
        pageNum: 1,
        pageSize: 10,
        companyId: '-1',
        educationLevel: '',
        expertAttribute: '',
        partFull: '',
        managerType: '',
        isExpert: '',
        expertCategory: '',
        userName: '',
        managerName: '',
        companyName: '',
        isSafetyCertify: ''
      },
      list: [
        {
          label: '消防管理人员',
          value: '消防管理人员',
          listFun: XfManagerList
        },
        {
          label: '专家库',
          value: '专家库',
          listFun: XfExpertList
        }
      ],
      listFun: XfManagerList,
      active: '消防管理人员',
      activeIndex: 0,
      current: '',
      listData: []
    }
  },
  watch: {
    'formInline.managerName'(new_) {
      this.formInline.userName = new_
    }
  },
  mounted() {
    const { current, active } = this.$route.query
    if (current) {
      this.current = current
    }
    if (active) {
      const checkValueIndex = this.list.findIndex(val => val.label === active)
      this.activeIndex = checkValueIndex
      this.listFun = this.list[checkValueIndex].listFun
      this.active = active
    }
    this.companyList()
  },
  methods: {
    getTime(val) {
      this.formInline.years = val
    },
    tagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.activeIndex = tagArg.index
      this.active = label
      this.listData = []
      this.listFun = listFun
      this.resetSuperSearch()
      this.companyList()
    },
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.companyList()
    },
    // 企业名称查询
    handleSearch(value) {
      // this.formInline.companyName = value
      this.formInline.managerName = this.formInline.userName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.formInline.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.formInline.professionType = args.value
    },
    // 重置
    resetSuperSearch() {
      this.$refs.customPopCascade?.clearCascader()
      Object.keys(this.formInline).forEach(val => {
        this.formInline[val] = ''
      })
      this.$refs.customSearch.restore()
      this.formInline.pageSize = 10
      this.formInline.years = new Date().getFullYear() + ''
      this.formInline.pageNum = 1
      this.formInline.companyId = -1
    },
    // 跳转详情
    goToDetails(item) {
      const { expertId, managerId } = item
      this.$router.push({
        path: '/staging/personnelDetails',
        query: { id: this.active === '专家库' ? expertId : managerId, current: this.current, active: this.active }
      })
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const { status, data } = await this.listFun(this.formInline)
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped></style>
